<template>
  <div class="weui-panel weui-panel_access" :style="{backgroundColor: type === '7'?'#efeff4':''}">
    <div class="weui-panel__hd" v-if="header" @click="onClickHeader" v-html="header">
      <slot name="header"></slot>
    </div>
    <div class="weui-panel__bd">
      <slot name="body">
        <!--type==='1'-->
        <template v-if="type === '1'">
          <a :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)"
             class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd" v-if="item.src">
              <img class="weui-media-box__thumb" :src="item.src" @error="onImgError(item, $event)" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title" v-html="item.title"></h4>
              <p class="weui-media-box__desc" v-html="item.desc"></p>
            </div>
          </a>
        </template>
        <!--type==='2'-->
        <template v-if="type === '2'">
          <div class="weui-media-box weui-media-box_text" v-for="item in list" @click.prevent="onItemClick(item)">
            <h4 class="weui-media-box__title" v-html="item.title"></h4>
            <p class="weui-media-box__desc" v-html="item.desc"></p>
          </div>
        </template>
        <!--type==='3'-->
        <template v-if="type === '3'">
          <div class="weui-media-box weui-media-box_small-appmsg">
            <div class="weui-cells">
              <a class="weui-cell weui-cell_access" :href="getUrl(item.url)" v-for="item in list"
                 @click.prevent="onItemClick(item)">
                <div class="weui-cell__hd">
                  <img :src="item.src" alt="" @error="onImgError(item, $event)"
                       style="width:20px;margin-right:5px;display:block">
                </div>
                <div class="weui-cell__bd">
                  <p v-html="item.title"></p>
                </div>
                <span class="weui-cell__ft"></span>
              </a>
            </div>
          </div>
        </template>
        <!--type==='4'-->
        <template v-if="type === '4'">
          <div class="weui-media-box weui-media-box_text" v-for="item in list" @click.prevent="onItemClick(item)">
            <h4 class="weui-media-box__title" v-html="item.title"></h4>
            <p class="weui-media-box__desc" v-html="item.desc"></p>
            <ul class="weui-media-box__info" v-if="item.meta">
              <li class="weui-media-box__info__meta" v-html="item.meta.source"></li>
              <li class="weui-media-box__info__meta" v-html="item.meta.date"></li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra" v-html="item.meta.other"></li>
            </ul>
          </div>
        </template>
        <!--type==='5'-->
        <template v-if="type === '5'">
          <div class="weui-media-box weui-media-box_text" v-for="item in list" @click.prevent="onItemClick(item)">
            <div class="weui-media-box_appmsg">
              <div class="weui-media-box__hd" v-if="item.src">
                <img class="weui-media-box__thumb" @error="onImgError(item, $event)" :src="item.src" alt="">
              </div>
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title" v-html="item.title"></h4>
                <p class="weui-media-box__desc" v-html="item.desc"></p>
              </div>
            </div>
            <ul class="weui-media-box__info" v-if="item.meta">
              <li class="weui-media-box__info__meta" v-html="item.meta.source"></li>
              <li class="weui-media-box__info__meta" v-html="item.meta.date"></li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra" v-html="item.meta.other"></li>
            </ul>
          </div>
        </template>
        <template v-if="type === '6'">
          <div class="weui-media-box weui-media-box_text" v-for="item in list" @click.prevent="onItemClick(item)">
            <div class="weui-media-box_appmsg">
              <div class="weui-media-box__hd" style="width: 44px;height: 44px;line-height: 44px">
                <button class="weui-media-box__thumb risk_button nameFlagBtn" style="height: 100vh"
                        :class="filter(item)">{{filterText(item)}}
                </button>
              </div>
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title" v-html="item.title"
                    style="color:#999999;margin-bottom: 0;font-size: 15px"></h4>
                <span style="font-size: 13px;line-height: 16px;float: right;color:#aaa">{{item.date}}</span>
                <p class="weui-media-box__desc" v-html="item.desc"></p>
              </div>
            </div>
            <ul class="weui-media-box__info" v-if="item.meta">
              <li class="weui-media-box__info__meta" v-html="item.meta.source"></li>
              <li class="weui-media-box__info__meta" v-html="item.meta.date"></li>
              <li class="weui-media-box__info__meta weui-media-box__info__meta_extra" v-html="item.meta.other"></li>
            </ul>
          </div>
        </template>
        <template v-if="type === '7'">
          <div class="" :style="{backgroundColor: 'white',marginTop: index === 0?'0':'10px'}" v-for="(item,index) in list" @click.prevent="onItemClick(item)">
            <div class="item-list-title" style="color:#666">{{item.title}}</div>
            <div style="padding: 10px">
              <div class="weui-media-box_appmsg">
                <div class="weui-media-box__hd" style="width: 44px;height: 44px;line-height: 44px">
                  <button class="weui-media-box__thumb risk_button nameFlagBtn" style="height: 100vh"
                          :class="filter(item)">{{filterText(item)}}
                  </button>
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title" style="color:#666;margin-bottom: 10px;font-size: 14px">
                    询价单号: {{item.riskNo}}
                  </h4>
                  <span style="font-size: 13px;line-height: 16px;float: right;color:#aaa">{{item.date}}</span>
                  <p class="weui-media-box__desc" style="color:#666;margin-bottom: 0;font-size: 14px">
                    待处理岗: {{item.desc}}
                  </p>
                </div>
              </div>
              <!--<ul class="weui-media-box__info" v-if="item.meta">-->
              <!--<li class="weui-media-box__info__meta" v-html="item.meta.source"></li>-->
              <!--<img src="static/image/list/wechat.png" alt="微信" style="width: 13px" v-if="item.weChat === 1">-->
              <!--<img src="static/image/list/pc.png" alt="线下" style="width: 13px" v-if="item.weChat === 0">-->
              <!--<li class="weui-media-box__info__meta" v-html="item.meta.date"></li>-->
              <!--<li class="weui-media-box__info__meta weui-media-box__info__meta_extra" v-html="item.meta.other"></li>-->
              <!--</ul>-->
            </div>
          </div>
        </template>
      </slot>
    </div>
    <div class="weui-panel__ft">
      <a class="weui-cell weui-cell_access weui-cell_link" :href="getUrl(footer.url)" v-if="footer && type !== '3'"
         @click.prevent="onClickFooter">
        <div class="weui-cell__bd" v-html="footer.title"></div>
      </a>
    </div>
  </div>
</template>

<script>
  import {go, getUrl} from '../../libs/router'

  export default {
    name: 'panel',
    props: {
      header: String,
      footer: Object,
      list: Array,
      type: {
        type: String,
        default: '1'
      }
    },
    methods: {
      onImgError (item, $event) {
        this.$emit('on-img-error', JSON.parse(JSON.stringify(item)), $event)
        if (item.fallbackSrc) {
          $event.target.src = item.fallbackSrc
        }
      },
      getUrl (url) {
        return getUrl(url, this.$router)
      },
      onClickFooter () {
        this.$emit('on-click-footer')
        go(this.footer.url, this.$router)
      },
      onClickHeader () {
        this.$emit('on-click-header')
      },
      onItemClick (item) {
        this.$emit('on-click-item', item)
        go(item.url, this.$router)
      },
      filter(row){
        let index = null;
        if (row.passFlag === "2") {
          index = "2"
        } else if (row.passFlag === "1") {
          index = "1"
        } else {
          index = "0"
        }
        let className = "btnStatus" + index;
        return className
      },
      filterText(row){
        let agentAry = row.name.split('');
        let text = agentAry[agentAry.length - 1];
        return text
      },
    }
  }
</script>
<style>
  .risk_button {
    vertical-align: top;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    color: white;
  }
</style>
<style lang="less">
  @import '../../styles/weui/widget/weui_cell/weui_cell_global';
  @import '../../styles/weui/widget/weui_cell/weui_access';
  @import '../../styles/weui/widget/weui_panel/weui_panel';
  @import '../../styles/weui/widget/weui_media_box/weui_media_box';
</style>
